<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>杭州市城市公交数字可视化平台</title>
        <link rel="stylesheet" href="css/test.css">
    </head>
    <body>
        <header>
            <h1>杭州市城市公交数字可视化平台</h1>
            <div class="showTime"></div>]
            <script>
            var t = null;
             t = setTimeout(time, 1000);//開始运行
                function time() {
                    clearTimeout(t);//清除定时器
                    dt = new Date();
                    var y = dt.getFullYear();
                    var mt = dt.getMonth() + 1;
                    var day = dt.getDate();
                    var h = dt.getHours();//获取时
                    var m = dt.getMinutes();//获取分
                    var s = dt.getSeconds();//获取秒
                    document.querySelector(".showTime").innerHTML = '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
                     t = setTimeout(time, 1000); //设定定时器，循环运行     
                }
            </script>
            &
        </header>
        <section class="mainbox">
            <div class="column">
                <div class="panel bar">
                    <h2>
                        <a href="javacript:;">城市公交</a>
                        <a href="javacript:;">城乡公交</a>
                        <a href="javacript:;">农村客运</a>
                    </h2>
                    <div class="chart">
                        <ul class="ul_title">
                        	<li>线路名称</li>
                            <li>线路长度</li>
                            <li>始发站</li>
                            <li>终到站</li>
                            <li>热点站</li>
                        </ul>
                        <div class="ul_list">
                        	<div class="ul_listIn">
                                <ul class="ul_con">
                                    <li>101</li>
                                    <li>1</li>
                                    <li>蒋村</li>
                                    <li>武林广场</li>
                                    <li>\</li>
                                </ul>
                                <ul class="ul_con">
                                    <li>101</li>
                                    <li>2</li>
                                    <li>蒋村</li>
                                    <li>武林广场</li>
                                    <li>\</li>
                                </ul>
                                <ul class="ul_con">
                                    <li>101</li>
                                    <li>3</li>
                                    <li>蒋村</li>
                                    <li>武林广场</li>
                                    <li>\</li>
                                </ul>
                                <ul class="ul_con">
                                    <li>101</li>
                                    <li>4</li>
                                    <li>蒋村</li>
                                    <li>武林广场</li>
                                    <li>\</li>
                                </ul>
                                <ul class="ul_con">
                                    <li>101</li>
                                    <li>5</li>
                                    <li>蒋村</li>
                                    <li>武林广场</li>
                                    <li>\</li>
                                </ul>
                                <ul class="ul_con">
                                    <li>101</li>
                                    <li>6</li>
                                    <li>蒋村</li>
                                    <li>武林广场</li>
                                    <li>\</li>
                                </ul>
                                 <ul class="ul_con">
                                    <li>101</li>
                                    <li>1</li>
                                    <li>蒋村</li>
                                    <li>武林广场</li>
                                    <li>\</li>
                                </ul>
                                <ul class="ul_con">
                                    <li>101</li>
                                    <li>2</li>
                                    <li>蒋村</li>
                                    <li>武林广场</li>
                                    <li>\</li>
                                </ul>
                                <ul class="ul_con">
                                    <li>101</li>
                                    <li>3</li>
                                    <li>蒋村</li>
                                    <li>武林广场</li>
                                    <li>\</li>
                                </ul>
                                 <ul class="ul_con">
                                    <li>101</li>
                                    <li>4</li>
                                    <li>蒋村</li>
                                    <li>武林广场</li>
                                    <li>\</li>
                                </ul>
                                 <ul class="ul_con">
                                    <li>101</li>
                                    <li>5</li>
                                    <li>蒋村</li>
                                    <li>武林广场</li>
                                    <li>\</li>
                                </ul>
                                 <ul class="ul_con">
                                    <li>101</li>
                                    <li>6</li>
                                    <li>蒋村</li>
                                    <li>武林广场</li>
                                    <li>\</li>
                                </ul>
                            </div>
                       </div>
                    </div>
                    <div class="panel-footer"></div>
                </div>
                <div class="panel line">
                    <h2>公交路网评价指标</h2>
                    <div class="chart">
                        
                    </div>
                    <div class="panel-footer"></div>
                </div>
            </div>
            <div class="column">
                <div class="no">
                    <div class="no_hd">
                        <ul>
                            <li>2700</li>
                            <li>2257</li>
                            <li>1125961</li>
                            <li>1400</li>
                        </ul>
                    </div>
                    <div class="no_bd">
                        <ul>
                            <li>累计客流量（万人次）</li>
                            <li>累计运营里程（万公里）</li>
                            <li>累计发车班次（趟）</li>
                            <li>公交车辆数（辆）</li>
                        </ul>
                    </div>
                    <div class="no_hd1">
                        <ul>
                            <li>480</li>
                            <li>156</li>
                            <li>45866</li>
                            <li>1624</li>
                        </ul>
                    </div>
                    <div class="no_bd">
                        <ul>
                            <li>公交驾驶人员（人）</li>
                            <li>公交线路数（条）</li>
                            <li>昨日客流量（人次）</li>
                            <li>昨日发车班次（趟）</li>
                        </ul>
                    </div>
                    <div class="no_hd2">
                        <ul>
                            <li>35265</li>
                            <li>22351</li>
                            <li>48%</li>
                            <li>46%</li>
                        </ul>
                    </div>
                    <div class="no_bd">
                        <ul>
                            <li>昨日运营里程（公里）</li>
                            <li>今日客流量（人次）</li>
                            <li>车辆上线率</li>
                            <li>整体上座率</li>
                        </ul>
                    </div>
                </div>
                <div class="map">
                    <div class="map1"></div>
                    <div class="map2"></div>
                    <div class="map3"></div>
                    <div class="chart"></div>
                </div>

            </div>
            <div class="column">
                <div class="panel2 bar2">
                    <h2>运营效果评价指标</h2>
                    <div class="bar_hd">
                        <ul>
                            <li>累计客流量</li>
                            <li>累计运营里程</li>
                            <li>累计发车班次</li>
                            <li>公交车辆数</li>
                        </ul>
                    </div>
                    <div class="chart">
                        <div class="chartyibiao1"></div>
                        <div class="chartyibiao2"></div>
                        <div class="chartyibiao3"></div>
                        <div class="chartyibiao4"></div>
                    </div>
                    <div class="panel-footer"></div>
                </div>
                <div class="panel3 line2">
                    <h2>运营组织评价指标</h2>
                    <div class="chart">
                        <div class="sycm">
                            <ul class="clearfix">
                              <li><h2>83</h2><span>信息覆盖系统</span></li>
                              <li><h2>75</h2><span>服务化水平</span></li>
                              <li><h2>90</h2><span>车内环境</span></li>
                              </ul>
                              <div style="border-bottom: 1px solid rgba(255,255,255,.1)"></div>
                              <ul class="clearfix">
                              <li><h2>58</h2><span>出行成本</span></li>
                              <li><h2>88</h2><span>昨日销售额</span></li>
                              <li><h2>85</h2><span>安全管理水平/span></li>
                              </ul>      
                        </div>
                    </div>
                    <div class="panel-footer"></div>
                </div>
                <div class="panel4 biao2">
                    <h2>乘客情报板</h2>
                    <div class="chart">
                        <ul class="xcspwt-box js-xcspwt">
                            <li>
                                <span>110路</span>
                                <span >110路公交车环境整洁、乘坐舒服、发车频率高，值得点赞</span>
                            </li>
                            <li>
                                <span>120路</span>
                                <span >120路的蒋师傅油门踩得也忒猛了，就几站路，坐得人晕头晃脑的……</span>
                            </li>
                            <li>
                                <span>110路</span>
                                <span >110路公交车环境整洁、乘坐舒服、发车频率高，值得点赞</span>
                            </li>
                            <li>
                                <span>120路</span>
                                <span >120路的蒋师傅油门踩得也忒猛了，就几站路，坐得人晕头晃脑的……</span>
                            </li>
                            <li>
                                <span>110路</span>
                                <span >110路公交车环境整洁、乘坐舒服、发车频率高，值得点赞</span>
                            </li>
                            <li>
                                <span>120路</span>
                                <span >120路的蒋师傅油门踩得也忒猛了，就几站路，坐得人晕头晃脑的……</span>
                            </li>
                            <li>
                                <span>110路</span>
                                <span >110路公交车环境整洁、乘坐舒服、发车频率高，值得点赞</span>
                            </li>
                            <li>
                                <span>120路</span>
                                <span >120路的蒋师傅油门踩得也忒猛了，就几站路，坐得人晕头晃脑的……</span>
                            </li>
                            <li>
                                <span>110路</span>
                                <span >110路公交车环境整洁、乘坐舒服、发车频率高，值得点赞</span>
                            </li>
                        </ul>
                    </div>
                    <div class="panel-footer"></div>
                </div>
            </div>
            <div style="clear:both;"></div>
        </section>
        <script src="js/flexible.js"></script>
        <script src="js/echarts.min.js"></script>
        <!-- 先引入jquery -->
        <script src="js/jquery.js"></script>
        <!-- 必须先引入china.js 这个文件 因为中国地图需要 -->
        <script src="js/china.js"></script>
        <script src="js/zhejiang.js"></script>
        <script src="js/jquery.numscroll.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(".shu1").numScroll();
            $(".shu2").numScroll();
            $(".shu3").numScroll();
            $(".shu4").numScroll();
            $(".shu5").numScroll();
            $(".shu6").numScroll();

            /*$(".num2").numScroll({
                time:5000
            });*/
        </script>
        <script src="js/test.js"></script>
    </body>
</html>
